import React from "react";
import { generateAvatar } from "../mock/utils";
import type { Message } from "../mock/types";

interface MessageDisplayProps {
  messages: Message[];
  chatContainerRef: React.RefObject<HTMLDivElement | null>;
  chatEndRef: React.RefObject<HTMLDivElement | null>;
  menuRef: React.RefObject<HTMLDivElement>;
  activeMessageId: string | null;
  getMenuStyle: () => React.CSSProperties;
  showContextMenu: (messageId: string, x: number, y: number) => void;
  handleTouchStart: (e: React.TouchEvent, messageId: string) => void;
  handleTouchMove: (e: React.TouchEvent) => void;
  handleTouchEnd: () => void;
  handleDeleteMessage: (id: string) => void;
  setActiveMessageId: (id: string | null) => void;
  setIsEmojiPickerOpen: (open: boolean) => void;
  MessageOpMenu: React.FC<{
    menuRef: React.RefObject<HTMLDivElement>;
    style: React.CSSProperties;
    onReply: () => void;
    onForward: () => void;
    onDelete: (e: React.MouseEvent) => void;
  }>;
}

const MessageDisplay: React.FC<MessageDisplayProps> = ({
  messages,
  chatContainerRef,
  chatEndRef,
  menuRef,
  activeMessageId,
  getMenuStyle,
  showContextMenu,
  handleTouchStart,
  handleTouchMove,
  handleTouchEnd,
  handleDeleteMessage,
  setActiveMessageId,
  setIsEmojiPickerOpen,
  MessageOpMenu,
}) => (
  <div
    ref={chatContainerRef}
    className="flex-1 overflow-y-auto bg-gray-100 p-4 space-y-4 relative"
    onClick={() => {
      setActiveMessageId(null);
      setIsEmojiPickerOpen(false);
    }}
  >
    {messages.map((message) => (
      <div
        key={message.id}
        className={`chat ${message.isMine ? "chat-end" : "chat-start"}`}
        onContextMenu={(e) => {
          e.preventDefault();
          showContextMenu(message.id, e.pageX, e.pageY);
        }}
        onTouchStart={(e) => handleTouchStart(e, message.id)}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        {/* 发送者头像 */}
        <div className="chat-image avatar">
          <div className="w-10 rounded-full">
            {generateAvatar(
              message.sender.name,
              message.isMine ? "bg-green-500" : "bg-blue-500"
            )}
          </div>
        </div>

        {/* 发送者名字（群聊中显示非自己消息的发送者） */}
        {!message.isMine && (
          <div className="chat-header text-xs text-gray-500 mb-1 ml-2">
            {message.sender.name}
          </div>
        )}

        {/* 消息气泡 */}
        <div
          className={`chat-bubble ${
            message.isMine
              ? "bg-green-500 text-white"
              : "bg-white text-gray-800 border border-gray-200"
          } 
            rounded-2xl py-2 px-3 shadow-sm ${
              message.type === "emoji" ? "text-xl" : ""
            }`}
        >
          {message.content}
        </div>

        {/* 消息时间 */}
        <div className="chat-footer text-xs text-gray-500 mt-1">
          {message.time}
        </div>
      </div>
    ))}

    {/* 消息操作菜单 */}
    {activeMessageId && (
      <MessageOpMenu
        menuRef={menuRef}
        style={getMenuStyle()}
        onReply={() => {
          console.log("回复消息");
          setActiveMessageId(null);
        }}
        onForward={() => {
          console.log("转发消息");
          setActiveMessageId(null);
        }}
        onDelete={(e) => {
          e.stopPropagation();
          handleDeleteMessage(activeMessageId);
        }}
      />
    )}

    <div ref={chatEndRef} />
  </div>
);

export default MessageDisplay;
